import Vue from 'vue'
import Vuex from 'vuex'
import $http from '../http';

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    booklist: [],
    searchlist: [],
    book: {}, //当前book详情数据
    myshelf: [], //我的书架列表
    selectednum:0 //选中的书架上的图书个数
  },
  getters: {
     
  },
  mutations: {
    setBooklist(state, data) {
      state.booklist = data
    },

    setBook(state, data) {
      state.book = data;
    },

    searchBook(state, searchWord) {
      state.searchlist = state.booklist.filter((item) => {
        return !searchWord || item.title.includes(searchWord)
      });
    },

    addShelf(state, data) {
      var index = state.myshelf.findIndex((item) => {
        return item.id === data.id
      });

      if (index === -1) {
        state.myshelf.push(data)
      } else {
        alert('这本书已经添加过了 请不要重复添加');
      }
    },

    removeShelf(state, data) {
      var index = state.myshelf.findIndex((item) => {
        return item.id === data.id
      });
      if (index > -1) {
        state.myshelf.splice(index, 1);
      }
    },
    selectAll(state) {
      state.myshelf.forEach((item) => {
        item.selected = true;
      })
    },
    cancalSelect(state) {
      state.myshelf.forEach((item) => {
        item.selected = false;
      })
    },


  },
  actions: {
    GET_BOOKLIST(context) {
      // 返回一个promise对象 方便调用层能够执行then方法 
      // $http就是axios实例 ，axios实例的get方法本身就返回一个Promise对象，所以这里可以用then方法
      // 可以看到这里是外层promise前套内层的promise
      return new Promise((resolve, reject) => {
        $http.get('/api/booklist').then((res) => {
          context.commit('setBooklist', res.list);
          resolve(res) // 将数据返回给上一调用层 在上一级可以用.then方法获取res
        }, (err) => {
          reject(err);
        })
      })
    },

    GET_BOOK(context, id) {
      return new Promise((resolve, reject) => {
        $http.get('/api/book?id=' + id).then((res) => {
          context.commit('setBook', res);
          resolve(res)
        }, (err) => {
          reject(err)
        })
      })
    }
  },
  modules: {}
  
})